<template>
	<view @touchmove.prevent.stop>
		<view>
			<uni-popup ref="popup" type="center">
				<view class="popup_content">
					<view class="content">
						<view class="title">
							<image src="/static/receiveGiftPacksTitle1.png"></image>
						</view>
						<view class="bg">
							<image src="/static/receiveGiftPacks1.png"></image>
						</view>
						<view class="text">大量优惠券，等你来领取</view>
						<!-- {{newUserCouponPackage.couponName}} -->
					</view>
					<button @click="receive">领取礼包</button>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import {
		receiveNewUserCouponPackage
	} from "@/request/api.js";
	import newUserCouponPackageVue from "./newUserCouponPackage.vue";
	import util from "@/utils/util.js"
	export default {
		props: {
			// 新手大礼包信息
			newUserCouponPackage: {
				type: Object,
				default: {}
			}
		},
		name: "newUserCouponPackage",
		data() {
			return {

			};
		},
		methods: {
			// 显示新手大礼包
			showPopup() {
				this.$refs.popup.open('content')
			},
			// 领取新手大礼包
			async receive() {
				let datas = util.getStorePage();
				let currAddress = datas['currAddress'];
				let res = await receiveNewUserCouponPackage({
					method: "GET",
					type: 'urlencoded',
					data: {
						siteId: currAddress ? currAddress.addressId : '',
						couponId: this.newUserCouponPackage.couponId
					}
				})
				let isSuccess = res.code == 200;
				uni.showToast({
					title: isSuccess ? '领取成功' : res.message,
					icon: 'none'
				})
				this.$emit('receiveFn');
				if (isSuccess) {
					this.$refs.popup.close()
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.popup_content {
		background-color: #fff;
		border-radius: 20rpx;
		overflow: hidden;
	}

	.content {
		width: 530rpx;
		height: 560rpx;
		text-align: center;
		font-size: 32rpx;
		position: relative;

		.title {
			position: absolute;
			top: 20rpx;
			left: 50%;
			transform: translateX(-50%);
			width: 360rpx;
			height: 80rpx;
		}

		.bg {
			margin: 30rpx auto 0;
			width: 464rpx;
			height: 504rpx;
		}

		.title,
		.bg {
			image {
				display: block;
				width: 100%;
				height: 100%;
			}
		}

		.text {
			position: absolute;
			width: 100%;
			text-align: center;
			top: 120rpx;
			left: 50%;
			transform: translateX(-50%);
			font-size: 32rpx;
			font-weight: 600;
			background: linear-gradient(180deg, rgba(253, 95, 19, 1) 0%, rgba(241, 53, 37, 1) 100%);
			-webkit-background-clip: text !important;
			-webkit-text-fill-color: transparent;
			/* Safari/Chrome */
			color: transparent;
			/* Firefox/Opera */
		}
	}

	button {
		height: 80rpx;
		line-height: 80rpx;
		color: #fff;
		margin: 0 60rpx 40rpx;
		border-radius: 40rpx;
		background: linear-gradient(180deg, #fd6013 0%, #f13426 100%);
	}
</style>